<script setup lang="ts">
import type { VideoItem } from '~/types/video'
import AppHeader from '~/components/AppHeader.vue'
import AppVideo from '~/components/AppVideo.vue'

// 不需要安装axios

// 请求channel数据  data是响应式数据 可直接渲染
const { data: channelList } = await useFetch('/api/channel')

// 获取视频列表数据
const { data: videoList } = await useFetch('/api/video')
useHead({
    meta: [{
        name: 'referrer',
        content: 'no-referrer'
    }]
})

// 显示的列表
const list = ref<VideoItem[]>([])
// 加载状态
const loading = ref(false)
// 是否加载完成
const finished = ref(false)

// 页码 和 页容量
let page = 1
let pageSize = 20

// 滚动触底触发
const onLoad = () => {
    // 表示正在加载
    loading.value = false
    // 根据当前页码提取数据
    const data = videoList.value?.slice(
        (page - 1) * pageSize,
        page * pageSize,
    ) as VideoItem[]
    // 追加到用于渲染的数组中
    list.value.push(...data)
    // 页码累加
    page++
    // 加载结束
    if (videoList.value?.length === list.value.length) {
        finished.value = true
    }
}

// 初始化加载 - 主动请求前 20 条数据，用于服务端首屏渲染，方便 SEO 抓取到数据
onLoad()
</script>

<template>
    <!-- 公共头部 -->
    <AppHeader />
    <!-- 频道模块 -->
    <van-tabs>
        <van-tab v-for="item in channelList" :key="item.id" :title="item.name" />
    </van-tabs>
    <!-- 滚动触底ui -->
    <van-list + v-model:loading="loading" :finished="finished" finished-text="去 bilibili App 看更多" @load="onLoad">
        <!-- 视频列表 -->
        <div class="video-list">
            <!-- 视频地址 传递对应参数bvid -->
            <AppVideo v-for="item in list" :key="item.aid" :item="item" />
        </div>
    </van-list>
</template>

<style lang="scss">
// 视频列表
.video-list {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 5px;
}
</style>